import { memo } from "react"
import { createStyles } from "antd-style"

const useStyles = createStyles(() => {
	return {
		starAnimation: {
			transformOrigin: "center",
			transformBox: "fill-box",
		},
		starAnimation1: {
			animation: "twinkle1 2s ease-in-out infinite",
			"@keyframes twinkle1": {
				"0%": {
					opacity: 1,
					transform: "scale(1)",
				},
				"50%": {
					opacity: 0.5,
					transform: "scale(0.85)",
				},
				"100%": {
					opacity: 1,
					transform: "scale(1)",
				},
			},
		},
		starAnimation2: {
			animation: "twinkle2 3s ease-in-out infinite",
			animationDelay: "0.5s",
			"@keyframes twinkle2": {
				"0%": {
					opacity: 1,
					transform: "scale(1)",
				},
				"50%": {
					opacity: 0.5,
					transform: "scale(0.85)",
				},
				"100%": {
					opacity: 1,
					transform: "scale(1)",
				},
			},
		},
	}
})

const MagicLogoNew = memo(function MagicLogoNew({ className }: { className?: string }) {
	const { styles } = useStyles()

	return (
		<svg
			className={className}
			xmlns="http://www.w3.org/2000/svg"
			width="120"
			height="92"
			viewBox="0 0 120 92"
			fill="none"
		>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M29.2419 21.3288C28.4647 22.8502 27.7435 25.0637 27.2592 27.9154C26.6051 31.7675 26.4645 36.3089 26.9485 40.8189C27.4339 45.342 28.5271 49.6452 30.207 53.1012C30.5837 53.8762 30.982 54.5933 31.4001 55.2523C31.4013 54.8511 31.4046 54.4474 31.4079 54.0431C31.409 53.9125 31.4101 53.7818 31.4111 53.6511C31.4154 53.0768 31.4193 52.5673 31.4193 52.1192C31.4193 50.1578 31.6311 46.806 33.7823 43.9244C36.1164 40.7978 39.9661 39.1772 45.1664 39.1772H51.4586C48.7052 35.717 44.2907 30.8718 39.5939 27.0441C37.1268 25.0335 34.7105 23.41 32.521 22.3924C31.2072 21.7818 30.12 21.4565 29.2419 21.3288ZM72.4335 39.1772H78.7257C83.926 39.1772 87.7757 40.7978 90.1098 43.9244C92.261 46.806 92.4728 50.1578 92.4728 52.1192C92.4728 52.5673 92.4766 53.0768 92.481 53.6511C92.482 53.7817 92.4831 53.9124 92.4842 54.0431C92.4875 54.4473 92.4908 54.8511 92.492 55.2523C92.9101 54.5933 93.3084 53.8762 93.6851 53.1012C95.365 49.6452 96.4582 45.342 96.9436 40.8189C97.4276 36.3089 97.287 31.7675 96.6329 27.9154C96.1486 25.0637 95.4274 22.8502 94.6502 21.3288C93.772 21.4565 92.6849 21.7818 91.3711 22.3924C89.1816 23.41 86.7653 25.0335 84.2982 27.0441C79.6014 30.8718 75.1869 35.717 72.4335 39.1772ZM85.9138 68.0767C85.4135 68.2644 84.9015 68.4277 84.391 68.57C82.3916 69.1273 80.0668 69.4574 77.7816 69.5401C75.5066 69.6224 73.0692 69.467 70.8788 68.9314C68.8453 68.4342 66.2424 67.4205 64.6257 65.1686C63.854 64.0937 63.1418 63.627 62.7179 63.4267C62.5321 63.3389 62.391 63.2971 62.3083 63.2783L61.946 63.3281L61.5838 63.2783C61.5011 63.2971 61.36 63.3389 61.1742 63.4267C60.7503 63.627 60.0381 64.0937 59.2664 65.1686C57.6497 67.4205 55.0468 68.4342 53.0133 68.9314C50.8229 69.467 48.3855 69.6224 46.1105 69.5401C43.8253 69.4574 41.5005 69.1273 39.5011 68.57C38.9906 68.4278 38.4786 68.2644 37.9783 68.0767C37.5292 69.922 37.123 71.3144 36.7619 72.3532L36.7612 72.3553C40.5946 76.7883 49.3037 83.4084 61.8329 83.0717L61.946 83.0686L62.0592 83.0717C74.5884 83.4084 83.2975 76.7883 87.1309 72.3553L87.1302 72.3532C86.7691 71.3144 86.3629 69.9219 85.9138 68.0767ZM29.844 65.8633C26.6875 63.5468 24.3351 60.2978 22.6291 56.7879C20.416 52.235 19.1295 46.9309 18.5702 41.7188C18.0094 36.4935 18.159 31.1719 18.9518 26.5035C19.7231 21.9614 21.1899 17.5197 23.6655 14.5032L24.6443 13.3107L26.1613 13.0321C29.6097 12.3991 33.0739 13.354 36.0711 14.7469C39.1244 16.166 42.1458 18.2506 44.9158 20.5081C49.3774 24.1442 53.5206 28.5044 56.5274 32.0689C57.0705 31.9392 57.5833 31.846 58.0354 31.7765C59.5264 31.5471 60.9644 31.4896 61.9461 31.5113C62.9277 31.4896 64.3657 31.5471 65.8567 31.7765C66.3088 31.846 66.8217 31.9392 67.3647 32.0689C70.3715 28.5044 74.5147 24.1442 78.9763 20.5081C81.7463 18.2506 84.7677 16.166 87.821 14.7469C90.8182 13.354 94.2824 12.3991 97.7308 13.0321L99.2478 13.3107L100.227 14.5032C102.702 17.5197 104.169 21.9614 104.94 26.5035C105.733 31.1719 105.883 36.4935 105.322 41.7188C104.763 46.9309 103.476 52.235 101.263 56.7879C99.557 60.2978 97.2046 63.5468 94.0481 65.8633C94.3748 67.223 94.6575 68.2395 94.8909 68.9826L99.199 69.6154L95.5867 75.1359C91.7313 81.0279 79.9272 91.938 61.946 91.5017C43.9649 91.938 32.1608 81.0279 28.3054 75.1359L24.6931 69.6154L29.0012 68.9826C29.2346 68.2395 29.5173 67.223 29.844 65.8633ZM40.5336 48.9689C40.0789 49.578 39.8457 50.5897 39.8457 52.1192C39.8457 52.6026 39.8416 53.1427 39.8373 53.7042L39.8372 53.7154C39.8195 56.0358 39.8096 57.4383 39.9501 58.5383C40.0454 59.2848 40.1874 59.6666 40.341 59.9196C40.3612 59.9306 40.3842 59.9428 40.4102 59.956C40.6848 60.096 41.1311 60.2732 41.7626 60.4492C43.0246 60.801 44.6802 61.0527 46.4151 61.1155C48.1602 61.1786 49.7826 61.0431 51.0126 60.7423C52.1273 60.4698 52.4609 60.1785 52.4684 60.1867C55.3691 56.1864 59.1639 54.7071 61.946 54.8446C64.7282 54.7071 68.523 56.1865 71.4236 60.1868C71.4311 60.1786 71.7648 60.4698 72.8795 60.7423C74.1095 61.0431 75.7319 61.1786 77.477 61.1155C79.2119 61.0527 80.8675 60.801 82.1295 60.4492C82.761 60.2732 83.2073 60.096 83.4819 59.956C83.5079 59.9428 83.5309 59.9306 83.5511 59.9196C83.7047 59.6666 83.8467 59.2848 83.942 58.5383C84.0825 57.4383 84.0725 56.0358 84.0548 53.7154L84.0548 53.7033C84.0505 53.1422 84.0464 52.6024 84.0464 52.1192C84.0464 50.5897 83.8132 49.578 83.3585 48.9689C83.0867 48.6048 82.1694 47.6073 78.7257 47.6073H45.1664C41.7227 47.6073 40.8054 48.6048 40.5336 48.9689Z"
				fill="url(#paint0_linear_2316_156456)"
			/>
			<path
				className={`${styles.starAnimation} ${styles.starAnimation1}`}
				d="M11.2048 17.6226C11.6395 18.3734 12.7875 18.0658 12.7886 17.1983L12.7947 12.1813C12.795 11.8787 12.9564 11.5992 13.2183 11.4475L17.5601 8.93378C18.3109 8.4991 18.0033 7.35108 17.1357 7.35003L12.1187 7.34395C11.8161 7.34358 11.5366 7.1822 11.385 6.92034L8.87124 2.57852C8.43657 1.82774 7.28854 2.13535 7.28749 3.00288L7.28141 8.01989C7.28105 8.32248 7.11967 8.602 6.8578 8.75361L2.51598 11.2674C1.76521 11.7021 2.07281 12.8501 2.94034 12.8511L7.95736 12.8572C8.25994 12.8576 8.53946 13.019 8.69108 13.2808L11.2048 17.6226Z"
				fill="url(#paint1_linear_2316_156456)"
			/>
			<path
				className={`${styles.starAnimation} ${styles.starAnimation2}`}
				d="M111.474 73.2975C111.475 73.8759 112.24 74.081 112.53 73.5805L114.206 70.6859C114.307 70.5113 114.493 70.4037 114.695 70.4035L118.04 70.3994C118.618 70.3987 118.823 69.6334 118.323 69.3436L115.428 67.6678C115.254 67.5667 115.146 67.3803 115.146 67.1786L115.142 63.8339C115.141 63.2556 114.376 63.0505 114.086 63.551L112.41 66.4456C112.309 66.6202 112.123 66.7277 111.921 66.728L108.576 66.732C107.998 66.7327 107.793 67.4981 108.293 67.7879L111.188 69.4637C111.362 69.5648 111.47 69.7511 111.47 69.9529L111.474 73.2975Z"
				fill="url(#paint2_linear_2316_156456)"
			/>
			<defs>
				<linearGradient
					id="paint0_linear_2316_156456"
					x1="22.9738"
					y1="17.3993"
					x2="102.002"
					y2="86.9135"
					gradientUnits="userSpaceOnUse"
				>
					<stop stopColor="#3F8FFF" />
					<stop offset="1" stopColor="#EF2FDF" />
				</linearGradient>
				<linearGradient
					id="paint1_linear_2316_156456"
					x1="4.85478"
					y1="18.9896"
					x2="17.1507"
					y2="2.45313"
					gradientUnits="userSpaceOnUse"
				>
					<stop stopColor="#3F8FFF" />
					<stop offset="1" stopColor="#EF2FDF" />
				</linearGradient>
				<linearGradient
					id="paint2_linear_2316_156456"
					x1="107.352"
					y1="71.9701"
					x2="119.964"
					y2="66.5214"
					gradientUnits="userSpaceOnUse"
				>
					<stop stopColor="#3F8FFF" />
					<stop offset="1" stopColor="#EF2FDF" />
				</linearGradient>
			</defs>
		</svg>
	)
})

export default MagicLogoNew
